<template>
  <a-card :bordered="false">
    <div class="dept">
      <div class="dept-footer">
        <a-tree
          :tree-data="list"
          :expandedKeys.sync="expandedKeys"
          @select="handleSelect"
          :replaceFields="{
            children:'children', title:'name', key:'id'
          }"
        >
        </a-tree>
      </div>
    </div>
  </a-card>
</template>

<script>
import { getList } from '@/api/dept'
export default {
  name: 'treeDept',
  data() {
    return {
      searchName: undefined,
      list: [],
      expandedKeys: [],
    }
  },
  mounted() {
    this.getDeptList();
  },
  methods: {
    getDeptList() {
      getList().then(ret => {
        if (ret.success) {
          this.list = ret.data;
          this.expandedKeys = ret.data.map(e => e.id);
          this.$emit('change', ret.data[0].id)
        }
      })
    },
    handleSelect(e) {
      this.$emit('change', e[0])
    }
  }
}
</script>

<style lang='less' scoped>
 /deep/ .ant-card-body {
   padding: 12px;
 }
  .dept-footer {
    height: calc(76vh - 50px);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
</style>
